<template>
	<view class="index_home">
		<animatedIndex />
		<view class="index_title">
			百士电子开放平台
		</view>
		<view class="grid_box">
			<view class="grid_item" v-for="(item, index) in gridList" :key="index" @click="goPage(item)">
				<view class="icon_box" :style="`background-color: ${item.color};`">
					<image class="icon" :src="item.icon" mode="" />
				</view>
				<text class="name">{{item.name}}</text>
			</view>
		</view>
		<view class="footer">
			让中国制造，成为中国创造！
		</view>
	</view>
</template>

<script>
	import animatedIndex from '@/components/animated/animated_index.vue'
	export default {
		components: {
			animatedIndex
		},
		data() {
			return {
				gridList: [{
					name: '订单查询',
					icon: '../../static/icon/index_order.png',
					url: '/pages/workOrder/workOrder',
					color: '#00adb5'
				}, {
					name: '产品溯源',
					icon: '../../static/icon/index_history.png',
					url: '/pages/qrCodeHistory/qrCodeHistory',
					color: '#ff5722'
				}, {
					name: '产品说明',
					icon: '../../static/icon/index_book.png',
					// url: '/pages/instructions/instructions',
					url: 'code',
					color: '#88304e'
				}, {
					name: '产品列表',
					icon: '../../static/icon/index_product.png',
					// url: '/pages/preview_pdf/preview_pdf?flag=0',
					url: 'code',
					color: '#ff165d'
				}, {
					name: '防伪查询',
					icon: '../../static/icon/index_fanwgei.png',
					url: 'code',
					color: '#3f72af'
				}, {
					name: '联系我们',
					icon: '../../static/icon/index_about.png',
					url: 'code',
					color: '#769fcd'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			goPage(item) {
				let {
					url
				} = item
				if (url == 'code') {
					return uni.showToast({
						title: '暂未开放',
						icon: 'none',
						duration: 1000
					})
				}
				uni.navigateTo({
					url,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index_home {
		width: 100vw;
		height: 100vh;

		.index_title {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			color: #FFFFFF;
			font-size: 60rpx;
			font-family: PangMengZhengDaoTitle;
		}

		.grid_box {
			width: calc(100% - 80rpx);
			height: calc(100% - 200rpx - 300rpx);
			padding: 0 40rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40rpx;
			row-gap: 40rpx;
			align-content: center;

			.grid_item {
				display: flex;
				align-content: center;
				justify-content: center;
				flex-wrap: wrap;
				width: 100%;
				height: 260rpx;
				background: rgba(255, 255, 255, 0.25);
				box-shadow: 0 8rpx 32rpx 0 rgba(31, 38, 135, 0.37);
				backdrop-filter: blur(4rpx);
				-webkit-backdrop-filter: blur(4rpx);
				border-radius: 16rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.18);

				.icon_box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					height: 100rpx;
					padding: 30rpx;
					border-radius: 50%;
					background-color: red;

					.icon {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.name {
					display: block;
					width: 100%;
					text-align: center;
					font-size: 30rpx;
					margin-top: 15rpx;
					color: #FFF;
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 300rpx;
			font-size: 24rpx;
			color: #FFF;
		}
	}
</style>